<style type="text/css">
    .btnAnswer{
        background-image: none;
        background-color: red;
    }
    #faqs { position:relative; }
    #faqs h3    { cursor:pointer; }
    #faqs h3.active { color:#d74646; }
    #faqs div   { position:relative; }
    #faqs div p { padding:0; margin-bottom:15px; }
</style>
<script language='javascript'>
	var _editor=false;
	var pptInterval=0;
    var widget;
    var slideClics = [];
    var mouseX, mouseY;

    var _ObjectID = null;
    var _ModuleID = null;
    var wg;

    <?php if(isset($object)){?>
        _ObjectID = <?php echo $object->id;?>;
        _ModuleID = <?php echo $object->_moduleId;?>;
    <?php } ?>

    $(document).mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }).mouseover();

	$(document).ready(function() {
        Ext.Loader.setConfig({enabled: true});
        Ext.Loader.setPath('Ext.ux', '../ux/');
        
        Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.toolbar.Paging',
            'Ext.ModelManager',
            'Ext.tip.QuickTipManager',
            'Ext.form.*',
            'Ext.layout.container.Column',
            'Ext.tab.*'
        ]);
        
        Ext.override(Ext.form.Panel, {
             clearForm:function(){
                Ext.each(this.getForm().getFields().items, function(field){
                    field.setValue('');
                    field.remove();
                });
             }
        });

        if(_ObjectID){
            Ext.Ajax.request({
                url: BASE_URL+"objects/get4Exec",
                params:{
                    id:_ObjectID, 
                    module_id:_ModuleID
                },
                success: function(response, opts) {
                   var obj = Ext.decode(response.responseText);
                   object = obj.data;
                   _init(object);
                },
                failure: function(response, opts) {
                   console.log('server-side failure with status code ' + response.status);
                }
            });
        }
        else{
            _init(null);
        }

        function _init(object){

            CFG = Ext.decode('<?php echo json_encode($cfg); ?>');

            var stSlides = new Ext.data.JsonStore({
                autoLoad: false,
                remoteSort: true,
                proxy: new Ext.data.HttpProxy({
                    url: BASE_URL + 'slides/loadList',
                    method: 'GET',
                //    extraParams: {elem_presentations_id: object.presentation.id},
                    reader: {
                        type: 'json',
                        root: 'rows',
                        totalProperty: 'results'
                    }
                }),
                fields:
                        [
                            {name: 'id', mapping: 'id', type: 'string'},
                            {name: 'title', mapping: 'title', type: 'string'},
                            {name: 'imgpath', mapping: 'imgpath', type: 'string'},
                            {name: 'audiopath', mapping: 'audiopath', type: 'string'},
                            {name: 'index', mapping: 'index', type: 'string'},
                            {name: 'effect', mapping: 'effect', type: 'string'},
                            {name: 'description', mapping: 'description', type: 'string'}
                        ]
            });
            //store de recursos y archivos
            var stResourceFiles = new Ext.data.JsonStore({
                autoLoad: false,
                remoteSort:true,
                proxy: new Ext.data.HttpProxy({
                    url: BASE_URL + 'objects/loadResourceFiles',
                    method: 'GET',
                  //  extraParams: {parent: object.id},
                    reader: {
                        type: 'json',
                        root: 'rows',
                        totalProperty: 'results'
                    }
                }),
                fields:
                [
                    {name: 'id', mapping: 'id', type: 'string'},
                    {name: 'description', mapping: 'description', type: 'string'},
                    {name: 'name', mapping: 'name', type: 'string'},
                    {name: 'status', mapping: 'status', type: 'string'},
                    {name: 'parent', mapping: 'parent', type: 'string'},
                    {name: 'content', mapping: 'content', type: 'string'},
                    {name: 'category_id', mapping: 'category_id', type: 'string'},
                    {name: 'category_name', mapping: 'category_name', type: 'string'},
                    {name: 'dcreated', mapping: 'dmodified', type: 'string'},
                    {name: 'dmodified', mapping: 'dcreated', type: 'string'},
                    {name: 'ucreated', mapping: 'ucreated', type: 'string'},
                    {name: 'umodified', mapping: 'umodified', type: 'string'}
                ]
            });
            
            function WidgetQuestion(cfg){
                this.cacheQuestion=null;
                this.allAnswers=[];
                this.question=null;
                this.questions=[];
                this.putHit=false;
                this.prevQuestion=null;
                this.prevQuestions=null;
                this.nextQuestion =null;
                this.nextQuestions =null;
                this.chart=null;
                this.store={};
                this.renderTo="";
                this.html = "";
                this.qhtml = "";
                this.rendered = false;
                this.selectedAnswer=null;
                this.selectedInnerAnswer=null;
                this.selectedAnswerId=null;
                this.winExplication = null;
                this.isReplied = false;
                this.Config = cfg;

                this._next = function(){
                    if(this.onNext){
                        this.onNext(this);
                    }
                };
                this._prev = function(){
                    if(this.onPrev){
                        this.onPrev(this);
                    }
                };
                this._getDOMQuestion = function(){
                    var q = this.question;
                    var ahtml = "";
                    var select = "";
                    if(q.type_questions_id == CFG.type_question_selection){
                        ahtml = "<ul >";
                        jQuery.each(q.answers, function(i,answer){
                            ahtml = ahtml+"<li><input style='width:30px;float:left;' name='rname' id='"+answer.id+"' class='checkAnswer' type='radio'/><label>"+answer.description+"</label></li>";
                        });
                        ahtml = ahtml+"</ul>";
                    }
                    else{
                        if(q.type_questions_id == CFG.type_question_pairterms){
                            //creamos un select
                            jQuery.each(q.innerAnswers,function(k,inner){
                                select = select + "<option value='"+inner.id+"'>"+inner.description+"</option>";
                            });
                            select = "<select class='selectAnswer' style='width:120px;float:left;height:30px;'>"+select+"</select>";
                            ahtml = "<ul>";
                            jQuery.each(q.answers, function(i,answer){
                                ahtml = ahtml + "<li><label id='"+answer.id+"' style='width:100px;float:left;height:30px;margin-top:3px;'>"+answer.description+"</label>"+select+"</li>";
                            });
                            ahtml = ahtml+"</ul>";
                        }
                        else{
                            if(q.type_questions_id == CFG.type_question_truefalse){
                                ahtml = "<ul >";
                                ahtml = ahtml+"<li><input style='width:30px;float:left;' name='rname' value='1' class='checkTrueFalseAnswer' type='radio'/><label>Verdadero</label></li>";
                                ahtml = ahtml+"<li><input style='width:30px;float:left;' name='rname' value='0' class='checkTrueFalseAnswer' type='radio'/><label>Falso</label></li>";
                                ahtml = ahtml+"</ul>";
                            }
                        }
                    }
                    if(!this.rendered){
                        ahtml = '<ul class="exec_question">'+
                                    '<li class="liQuestion">'+q.description+'</li>'+
                                    '<li class="liAnswers">'+ahtml+'</li>'+
                                '</ul>';    
                    }
                    else{
                        ahtml =     '<li class="liQuestion">'+q.description+'</li>'+
                                    '<li class="liAnswers">'+ahtml+'</li>';
                    }
                    return ahtml;
                };
                this.addAnswers = function(answers){
                    var _this = this;
                    jQuery.each(answers, function(k,_answer){
                        if(!_this.allAnswers[_answer.id])
                            _this.allAnswers[_answer.id] = _answer;    
                    })
                };
                this._addAnswersListeners = function(){
                    var _this = this;
                    if(this.question.type_questions_id == CFG.type_question_selection){
                        //evento click sobre un radio button de answer para el caso de seleccion multiple
                        jQuery("#"+this.renderTo+" .checkAnswer").on("click",function(){
                            var id = jQuery(this).attr("id");
                            _this._reply(id, "", _this );
                        });
                    }
                    else{
                        if(this.question.type_questions_id == CFG.type_question_pairterms){
                            //para el caso de terminos pareados
                            jQuery("#"+this.renderTo+" .selectAnswer").on("click",function(){
                                var idInner = jQuery(this).val();
                                var idParent = jQuery(this).parent().find("label").attr("id");
                                _this._reply(idParent, idInner, _this);
                            });
                        }
                        else{
                            if(this.question.type_questions_id == CFG.type_question_truefalse){
                                //para el caso de verdadero y falso
                                jQuery("#"+this.renderTo+" .checkTrueFalseAnswer").on("click",function(){
                                    var val = jQuery(this).val();
                                    _this._reply(val, null, _this);
                                });
                            }
                        }
                    }
                };
                this._setSelectedAnswers = function(){
                    var _this = this;
                    if(this.question.type_questions_id == CFG.type_question_selection){
                        //en el caso que presione el boton pregunta previa, cargamos la respuieswta seleccionada por le usuario
                        if(this.prevQuestion){
                            jQuery("#"+this.prevQuestion.execdetail.selected).attr('checked','checked');
                            var li = jQuery("#"+this.prevQuestion.execdetail.selected).parent();
                            li = li[0];
                            if(this.prevQuestion.status == "OK"){
                                jQuery(li).css("background-color","#C6DEBA");
                            }
                            else{
                                jQuery(li).css("background-color","#F2BDBD");
                            }
                        }
                        //en el caso que presione el boton pregunta siguiente, cargamos la respuieswta seleccionada por le usuario
                        if(this.nextQuestion){
                            jQuery("#"+this.nextQuestion.execdetail.selected).attr('checked','checked');
                            var li = jQuery("#"+this.nextQuestion.execdetail.selected).parent();
                            li = li[0];
                            if(this.nextQuestion.status == "OK"){
                                jQuery(li).css("background-color","#C6DEBA");
                            }
                            else{
                                jQuery(li).css("background-color","#F2BDBD");
                            }
                        }
                    }
                    else{
                        if(this.question.type_questions_id == CFG.type_question_pairterms){
                            if(this.prevQuestions){
                                jQuery.each(this.prevQuestions,function(i,innerAnswer){
                                    //selecciono el label con el id de la respuesta padre, y luego accedo al parent() li
                                    var li = jQuery("#"+innerAnswer.objects_id).parent();
                                    li = li[0];
                                    //obtengo a partir del parent() el hijo select
                                    var select = jQuery(li).find("select");

                                    jQuery(select).val(innerAnswer.execdetail.selected);

                                    if(innerAnswer.status == "OK"){
                                        jQuery(li).css("background-color","#C6DEBA");
                                    }
                                    else{
                                        jQuery(li).css("background-color","#F2BDBD");
                                    }
                                });

                            }
                            if(this.nextQuestions){
                                jQuery.each(this.nextQuestions,function(i,innerAnswer){
                                    //selecciono el label con el id de la respuesta padre, y luego accedo al parent() li
                                    var li = jQuery("#"+innerAnswer.objects_id).parent();
                                    li = li[0];
                                    //obtengo a partir del parent() el hijo select
                                    var select = jQuery(li).find("select");

                                    jQuery(select).val(innerAnswer.execdetail.selected);

                                    if(innerAnswer.status == "OK"){
                                        jQuery(li).css("background-color","#C6DEBA");
                                    }
                                    else{
                                        jQuery(li).css("background-color","#F2BDBD");
                                    }
                                });
                            }
                        }
                        else{
                            if(this.question.type_questions_id == CFG.type_question_truefalse){
                                //en el caso que presione el boton pregunta previa, cargamos la respuieswta seleccionada por le usuario
                                if(this.prevQuestion){
                                    jQuery("input[name=rname][value=" + this.prevQuestion.execdetail.selected + "]").attr('checked', 'checked');
                                    var li = jQuery("input[name=rname][value=" + this.prevQuestion.execdetail.selected + "]").parent();
                                    li = li[0];
                                    if(this.prevQuestion.status == "OK"){
                                        jQuery(li).css("background-color","#C6DEBA");
                                    }
                                    else{
                                        jQuery(li).css("background-color","#F2BDBD");
                                    }
                                }
                                //en el caso que presione el boton pregunta siguiente, cargamos la respuieswta seleccionada por le usuario
                                if(this.nextQuestion){
                                    jQuery("input[name=rname][value=" + this.nextQuestion.execdetail.selected + "]").attr('checked', 'checked');
                                    var li = jQuery("input[name=rname][value=" + this.nextQuestion.execdetail.selected + "]").parent();
                                    li = li[0];
                                    if(this.nextQuestion.status == "OK"){
                                        jQuery(li).css("background-color","#C6DEBA");
                                    }
                                    else{
                                        jQuery(li).css("background-color","#F2BDBD");
                                    }
                                }
                            }
                        }
                    }
                };
                //evento al contestar la pregunta
                this._reply = function(answer_id, answerInner_id, _this){
                    this.isReplied = true;
                    if(this.onReply){
                        this.onReply(answer_id, answerInner_id, _this);
                    }
                };
                this._init = function(){
                    if(!this.Config){
                        throw "(WidgetQuestion)->init: [Config] must be passed";
                        return false;
                    }
                    if(this.Config.question === null){
                        throw "(WidgetQuestion)->render: [question] must be initilized first";
                        return false;
                    }
                    if(!this.Config.renderTo){
                        throw "(WidgetQuestion)->render: [renderTo] must be initilized first";
                        return false;
                    }
                    if(!jQuery("#"+this.Config.renderTo)){
                        throw "(WidgetQuestion)->render: [renderTo] must be exist in DOM";
                        return false;
                    }
                    
                    for(var key in this.Config){
                        this[key] = this.Config[key];
                    }

                    this.question._isCache = false;
                    this._render();
                };
                this._render = function(){
                    var _this = this;
                    if(!this.rendered){
                        this.addAnswers(this.question.answers);
                        this.qhtml = this._getDOMQuestion(this.question);
                        this.html = this.qhtml +
                                '<ul class="ul_inline question_controls" style="float:left;width:200px;margin:30px 0 0 43%;">'+
                                    //'<li style="width:40px;"><button id="prev" class="btn btn-success" title="Pregunta Previa"><i class="icon-step-backward"></i></button></li>'+
                                    '<li style="width:40px;"><button id="next" class="btn btn-success" title="Pregunta Siguiente"><i class="icon-step-forward"></i></button></li>'+
                                '</ul>';
                        jQuery("#"+this.renderTo).html(this.html);

                        jQuery("#"+this.renderTo+" .question_controls #next").on("click",function(){
                            _this._next();
                        });
                        jQuery("#"+this.renderTo+" .question_controls #prev").on("click",function(){
                            _this._prev();
                        });
                        this.rendered = true;
                    }
                    else{
                        var lis = jQuery("#"+this.renderTo+" .exec_question li");
                        jQuery.each(lis,function(k,li){
                            jQuery(li).remove();
                        })
                        //si ya existe solo cambiamos contenido y no todo el dom
                        jQuery("#"+this.renderTo+" .exec_question").html(this._getDOMQuestion(this.question));
                    }
                    
                    //solo si es una pregunta que no este en cache agregamos listeners a las respuestas
                    if(!this.question.isCache){
                        this._addAnswersListeners();    
                    }
                    else{
                        //si es cache puede dar el caso que la pregunta aun no se responda correctamante
                        //por lo que de todas maneras le asignamos listeners de reply a las respuestas
                        if(this.cacheQuestion.status == CFG.object_user_exec){
                            this._addAnswersListeners();    
                        }
                        
                        //como es una pregunta de cache, seteamos las respuestas seleccionadas previamente por el usuariuo
                        this._setSelectedAnswers();    
                        
                    }
                };
                this.animate = function(direction, res, callback){
                    var _this = this;
                    $("#"+_this.renderTo+" .exec_question").show("slide", {direction: direction}, 700, 
                        function(){
                            if(callback){
                                callback();
                            }
                            else{
                                /*_this.question = res.data;
                                _this.addAnswers(_this.question.answers);
                                if(options.effectDirection == 'right'){
                                    _this.prevQuestion = null;
                                    _this.prevQuestions = null;
                                    if(res.selected.id)
                                        _this.nextQuestion = res.selected;
                                    if(res.selecteds && res.selecteds.length>0)
                                        _this.nextQuestions = res.selecteds;
                                }   
                                _this._render();*/
                            }
                        }
                    );
                };
                this.showExplication = function(answer){
                    var _this = this;
                    if(!this.winExplication){
                        this.winExplication = new Ext.Window({
                            title: 'Explicación',
                            autoRender:false,
                            resizable: false,
                            width: 300,
                            x:mouseX,
                            y:mouseY,
                            height: 150,
                            forceFit: true,
                            frame: false,
                            layout: 'fit',
                            modal: false,
                            plain: true,
                            buttonAlign: 'center',
                            items: [
                                {
                                    xtype:'textarea',
                                    id:'txt_explication',
                                    readOnly:true,
                                    margin:'10'
                                }
                            ],
                            closable: true,
                            buttons: [
                                {
                                    text: 'Cerrar',
                                    iconCls: 'x-icon-cancel',
                                    handler: function() {
                                        _this.winExplication.hide();
                                    }
                                }
                            ]
                        });
                        this.winExplication.on('close', function() {
                            _this.winExplication.toggleCollapse();
                        });
                        this.winExplication.on('minimize', function() {
                            _this.winExplication.toggleCollapse();
                        });
                    }
                    


                    this.winExplication.on('show',function(){
                        Ext.getCmp('txt_explication').setValue(answer.explication);
                    })

                    if(answer.explication){
                        this.winExplication.show();
                        Ext.getCmp('txt_explication').setValue(answer.explication);    
                    }
                };
                this.paintResult = function(value, answer_id){
                    var li ={};
                    if(this.question.type_questions_id != CFG.type_question_truefalse)
                        li = jQuery("#"+answer_id).parent();
                    else
                        li = jQuery('input[name=rname]:checked', "#"+this.renderTo).parent();

                    li = li[0];
                    if(value){
                        jQuery(li).css("background-color","#C6DEBA");
                    }   
                    else{
                        jQuery(li).css("background-color","#F2BDBD");
                    }
                };
                this.createChart = function(data){
                    
                    this.store = new Ext.data.JsonStore({
                        fields: ['answer', 'population'],
                        data: data   
                    });
                    this.chart = new Ext.chart.Chart( {
                        width: 400,
                        height: 300,
                        animate: true,
                        store: this.store,
                        autoRender:false,
                        renderTo: 'dChart',
                        shadow: true,
                        legend: {
                            position: 'right'
                        },
                        insetPadding: 25,
                        //theme: 'Base:gradients',
                        series: [{
                            type: 'pie',
                            field: 'population',
                            showInLegend: true,
                            highlight: {
                              segment: {
                                margin: 20
                              }
                            },
                            label: {
                                field: 'answer',
                                display: 'rotate',
                                contrast: true,
                                font: '18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
                            },
                            animate: true
                        }]
                    });
                };
                this._init();
            }
            
    		//grilla de recursos y archivos
    	 	grid = Ext.create('Ext.grid.Panel', {
                columnLines:true,
                remoteSort:true,
                loadMask: true,
                fit:true,
                forceFit:true,
                height: 240,
                width: '45%',
                margins: '10',
                selModel: new Ext.selection.RowModel({singleSelect: true}),
                store: stResourceFiles,
                columns: [
                    {
                        header: 'Tipo Recurso',
                        dataIndex: 'category_name'
                    },
                    {
                        header: 'Nombre',
                        dataIndex: 'name'
                    },
                    {
                        header: 'Descripción',
                        dataIndex: 'description'
                    },
                    {
                        xtype: 'actioncolumn',
                        header: 'Descargar',
                        align:'center',
                        width: 50,
                        items: [
                            {
                                icon: BASE_PATH+'/images/icons/arrow_down.png',
                                tooltip: 'Descargar',
                                handler: function (grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    window.open(rec.get("content"));
                                }
                            }
                        ]
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'pagingtoolbar',
                        store: stResourceFiles,
                        dock: 'bottom',
                        displayInfo: true
                    }
                ],
            });
    		
    		function updateObjectReferences(newObject){
                object = newObject;
                //si el objeto tema existe
                if(object && object.name){
                    stResourceFiles.getProxy().extraParams = {parent: object.id};
                    stResourceFiles.load();
                }
                //si el objeto tema posee presentacion
                if(object.presentation && object.presentation.name){
                    stSlides.getProxy().extraParams = {elem_presentations_id: object.presentation.id};
                    stSlides.load();
                }
                //si el objeto tema posee prueba
                if(object.test && object.test.title){
                    //stQuestions.getProxy().extraParams = {elem_test_id: object.test.id};
                }
            }
            function changeImage(img, record){
            	if(img){
            		img.attr("src",record.get('imgpath'));
            		var fx = record.get('effect');
            		if (fx != "fade") {
                        img.show("slide", {direction: fx}, 1000);
                    }
                    else {
                        img.fadeOut('slow', function() {
                            img.fadeIn();
                        });
                    }
            	}
            }
            function newFAQ(){
                var winFAQ = new Ext.Window({
                    title: 'Solicitud',
                    resizable: false,
                    width: 300,
                    height: 200,
                    forceFit: true,
                    frame: false,
                    layout: 'fit',
                    modal: true,
                    plain: true,
                    buttonAlign: 'center',
                    items: [
                        {
                            fieldLabel:"Pregunta",
                            xtype:'textarea',
                            id:'txtFAQ',
                            margin:'10'
                        }
                    ],
                    closable: false,
                    buttons: [
                        {
                            text: 'Guardar',
                            iconCls: 'x-icon-add',
                            handler: function() {
                                Ext.Ajax.request({
                                    url: BASE_URL+"requests/send",
                                    params:{
                                        content:Ext.getCmp("txtFAQ").getValue(),
                                        objects_id:object.id
                                    },
                                    success: function(response, opts) {
                                        Ext.MessageBox.show({
                                            title: 'Operación exitosa',
                                            msg: "Solicitud enviada en forma exitosa",
                                            buttons: Ext.MessageBox.OK,
                                            icon: Ext.MessageBox.OK,
                                            minWidth: 400
                                        });
                                        Ext.getCmp("txtFAQ").setValue("");
                                        winFAQ.hide();
                                    },
                                    failure: function(response, opts) {
                                       console.log('server-side failure with status code ' + response.status);
                                    }
                                });
                            }
                        },
                        {
                            text: 'Cerrar',
                            iconCls: 'x-icon-cancel',
                            handler: function() {
                                Ext.getCmp("txtFAQ").setValue("");
                                winFAQ.hide();
                            }
                        }
                    ]
                });
                winFAQ.on('close', function() {
                    Ext.getCmp("txtFAQ").setValue("");
                    win.toggleCollapse();
                });
                winFAQ.on('minimize', function() {
                    Ext.getCmp("txtFAQ").setValue("");
                    win.toggleCollapse();
                });
                winFAQ.show();
            }

            var htmlJPlayer = '<div id="jplayer" class="jp-jplayer"></div>';
            htmlJPlayer = htmlJPlayer + '<div id="jp_container_1" style="width:100%;" class="jp-audio">'+ jQuery("#jplayer_template").html() +'</div>';

    		Ext.create('Ext.panel.Panel', {
    	        width: '100%',
    	        height: 1280,
    	        layout: 'border',
    	        id:'mainPanel',
    	        items: [
                    {
                        title: 'DETALLE TEMA',
                        region: 'north',     
                        xtype: 'panel',
                        split: true,   
                        width: "100%",
                        height:280,
                        collapsible:true,
                        collapsed:false,
                        items:[
                            {
                                xtype:'panel',
                                border:false,
                                bodyPadding:20,
                                layout:'hbox',
                                items:[
                                    {
                                        xtype:'container',
                                        layout:'vbox',
                                        height:250,
                                        width:'50%',
                                        items:[
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                fieldLabel: 'Nombre Tema',
                                                readOnly:true,
                                                value:object.name
                                            },
                                            {
                                                xtype: 'textarea',
                                                labelWidth:200,
                                                fieldLabel: 'Descripción Tema',
                                                readOnly:true,
                                                value:object.description
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                fieldLabel: 'Categoría',
                                                readOnly:true,
                                                value:object.category.name
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                fieldLabel: 'Estado',
                                                readOnly:true,
                                                value:object.hit?object.hit.status:"Sin iniciar"
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                fieldLabel: 'VERSION',
                                                readOnly:true,
                                                value:object.version
                                            }
                                        ]
                                    },
                                    {
                                        xtype:'container',
                                        layout:'vbox',
                                        width:'50%',
                                        items:
                                        [
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                readOnly: true,
                                                fieldLabel: 'Creado por',
                                                value:object.ucreated
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                name:'dcreated',
                                                readOnly: true,
                                                fieldLabel: 'Fecha Creación',
                                                value:object.fcreated
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                readOnly: true,
                                                fieldLabel: 'Modificado por',
                                                value:object.umodified
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                readOnly:true,
                                                fieldLabel: 'Fecha Modificación',
                                                value:object.fmodified
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                readOnly:true,
                                                fieldLabel: 'Primera Ejecución',
                                                value:object.hit?object.hit.dcreated:""
                                            },
                                            {
                                                xtype: 'textfield',
                                                labelWidth:200,
                                                readOnly:true,
                                                fieldLabel: 'Última Ejecución',
                                                value:object.hit?object.hit.dmodified:""
                                            }
                                        ]
                                    }
                                    
                                ]
                            }
                            
                        ]
                    },
    	        	{
    	        		title: 'Recursos y Notas Personales',
    		            region: 'north',     
    		            xtype: 'panel',
    		            split: true,   
    		            margins: '5 5 5 5',
    		            width: "100%",
    		            height:300,
    		            layout: 'hbox',
    		            items:[
    		            	grid,
    		            	{
    		            		xtype:'container',
    		            		margins: '10 10 10 10',
    		            		id:'ctNotes',
    		            		title:'Notas personales',
    		            		width:'55%',
    		            		html:'<div class="elem_question_title" id="ckeditorNotes"></div>',
    		            		listeners:{
    		            			render:function(){
    		            				if(!_editor){
    		            					_editorCFG.height = 200;
    						                _editor = CKEDITOR.replace( 'ckeditorNotes' , _editorCFG);

    						                CKFinder.setupCKEditor(_editor, _editorCFG);

                                            if(!object.note)
    					                       _editor.setData("<b>Mis Notas Personales...</b>");
                                            else{
                                               _editor.setData(object.note.content);
                                            }
                                            _editor.on('blur', function(){
                                                Ext.Ajax.request({
                                                    url: BASE_URL+'notes/save',
                                                    params:{
                                                        objects_id:object.id,
                                                        content:_editor.document.getBody().getHtml()
                                                    },
                                                    success: function(response, opts) {
                                                       var obj = Ext.decode(response.responseText);
                                                       if(obj.success){
                                                            console.log("oko");
                                                       }
                                                    },
                                                    failure: function(response, opts) {
                                                       console.log('server-side failure with status code ' + response.status);
                                                    }
                                                });
                                            });

    						            }
    		            			}
    		            		}
    		            	}
    		            ]
    	        	},
    	        	{
    	        		title: 'Diapositivas',
    		            region: 'west',     
    		            xtype: 'panel',
    		            split: true,   
    		            margins: '5 5 5 5',
    		            width: "15%",
    		            height:500,
    		            collapsible: true, 
    		            collapsed:false,
    		            layout: 'fit',
    		            items:[
                            
    		            	{
                                id: 'gSlides',
                                xtype: 'grid',
                                layout: 'fit',
                                scroll: true,
                                width: '100%',
                                height: 400,
                                autoScroll: true,
                                autoSizeColumns: true,
                                frame: false,
                                selModel: new Ext.selection.RowModel({singleSelect: true}),
                                loadMask: true,
                                store: stSlides,
                                columns: [
                                    {header: 'ID', hidden: true, align: 'center', dataIndex: 'id'},
                                    {
                                        header: 'Diapositiva',
                                        flex: 0.08, align: 'left', dataIndex: 'imgpath',
                                        renderer: function(value, m, record) {
                                            var img = '<img class="elem_ppt_slide_img" src="' + record.get('imgpath') + '" title="' + record.get('title') + '"/>';
                                            return img;
                                        }
                                    },
                                    {header: 'Titulo', flex: 0.15, dataIndex: 'title'}
                                ],
                                listeners: {
                                    cellclick: function(g, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                                        var existe = false;
                                        jQuery.each(slideClics,function(i,clic){
                                            if(clic == rowIndex){
                                                existe = true;
                                            }
                                        });
                                        if(!existe){
                                            slideClics.push(rowIndex);
                                        }
                                        if(slideClics.length === stSlides.data.length){
                                            Ext.getCmp("pPrueba").setDisabled(false);
                                        }

                                    	changeImage(jQuery("#imgslide"), record);
                                        
                                        $("#jplayer").jPlayer("setMedia", {
                                            mp3: record.get('audiopath')
                                        });
                                        $("#jplayer").jPlayer("play");
                                        $("#jplayer").jPlayer({
                                            ended:function(e){
                                                
                                            }
                                        });
                                    }
                                }
                            }
    		            ]
    	        	},
    	        	{
    	        		title: 'Presentación',
    		            region: 'center',     
    		            xtype: 'panel',
    		            split: true,   
    		            margins: '5 5 5 5',
    		            width: "85%",
    		            height:500,
                        border:false,
    		            collapsible: true, 
    		            layout: 'vbox',
    		            items:[
                            {
                                xtype: 'panel',
                                height:500,
                                width:700,
                                border:false,
                                id:'ctSlides',
                                html: '<img style="width:700px;height:500px;" id="imgslide"/>',
                                listeners:{
                                	render:function(){

                                	}
                                }
                            },
                            {
                                xtype: 'panel',
                                height:200,
                                border:false,
                                width:'100%',
                                //hidden:true,
                                html: htmlJPlayer,
                                listeners:{
                                    render:function(){
                                        $("#jplayer").jPlayer({
                                            swfPath: "/js",
                                            supplied: "mp3, oga"
                                        });
                                    }
                                }
                            }
    		            ]
    	        	},
    	        	{
    	        		title: 'Prueba',
    		            region: 'east',   
                        id:'pPrueba', 
    		            disabled:false,
    		            xtype: 'panel',
    		            split: true,   
    		            margins: '5 5 5 5',
    		            width: 400,
    		            height:500,
    		            collapsible: true, 
    		            collapsed:object.test?false:true,
    		            layout: 'fit',
    		            html:'<div id="dQuestions" style="height:270px;width:380px;overflow-x:hidden;"></div><div style="width:330px;height:330px;" id="dChart"></div>',
    		            listeners:{
    		            	render:function(){
                                //si no existe es porque ya fue aprovada la prueba
    		            		if(object.test && object.test.questions[0]){
                                    /* v1
                                    widget = new WidgetQuestion();
                                    widget.question = object.test.questions[0];
                                    widget.renderTo = "dQuestions";
                                    widget.render();
                                    */
                                    //v2
                                    widget = new WidgetQuestion({
                                        question : object.test.questions[0],
                                        renderTo : "dQuestions",
                                        onReply:function(answer_id, answerInner_id, _thiswg){
                                            //_thiswg.showExplication(_thiswg.allAnswers[answer_id]);
                                            //obtenemos reporte pie de respuestas
                                            Ext.Ajax.request({
                                                url: BASE_URL + 'questions/reply',
                                                method: 'POST',
                                                params: {
                                                    qCurrentId: _thiswg.question.id, 
                                                    elem_test_id:_thiswg.question.elem_test_id,
                                                    answerId:answer_id,
                                                    value:answer_id,//en el caso de VF este campo es el valor selccionado
                                                    answerInnerId:answerInner_id
                                                },
                                                success:function(action) {   
                                                    var res = Ext.decode(action.responseText);
                                                    if(res.success){
                                                        var data = [];
                                                        var _answer = {};
                                                        if(_thiswg.question.type_questions_id == CFG.type_question_selection){
                                                            if(res.report){
                                                                jQuery.each(res.report.answers, function(i,answer){
                                                                    var q = 0;
                                                                    jQuery.each(res.report.report, function(answerId,count){
                                                                        if(answerId == answer.id){
                                                                            _answer = answer;
                                                                            q = count;
                                                                        }
                                                                    });
                                                                    data.push({ answer:answer.description, population: q});
                                                                    //solo si chart no existe lo creamos
                                                                    if(_thiswg.chart==null){
                                                                        _thiswg.createChart(data);
                                                                    }
                                                                    else{
                                                                        _thiswg.store.loadData(data);
                                                                    }

                                                                });
                                                            }
                                                            else{
                                                                if(_thiswg.chart)
                                                                    _thiswg.store.loadData([]);
                                                            }
                                                        }
                                                        if(res.data.reset){
                                                            Ext.Msg.show({
                                                                title: 'Confirme',
                                                                msg: 'Ha superado el límite de repeticiones de la prueba. Se reseteara el Tema.',
                                                                buttons: Ext.Msg.YES,
                                                                fn: function(btn) {
                                                                   location.href = location.href;
                                                                },
                                                                minWidth:300
                                                            });
                                                        }
                                                        else{
                                                            //si se necesita resetear la prueba
                                                            if(res.data.newFirstQuestion && res.data.newFirstQuestion.id){
                                                                _thiswg.question = null;
                                                                _thiswg.question = res.data.newFirstQuestion;
                                                                _thiswg.question.isCache = false;
                                                                _thiswg.addAnswers(_thiswg.question.answers);
                                                                _thiswg.prevQuestion = null;
                                                                _thiswg.prevQuestions = null;
                                                                Ext.Msg.show({
                                                                    title: 'Confirme',
                                                                    msg: 'Ha errado la prueba, se reiniciarán las preguntas.',
                                                                    buttons: Ext.Msg.YES,
                                                                    fn: function(btn) {
                                                                        _thiswg.animate("right", res, function(){
                                                                            _thiswg._render();
                                                                        });
                                                                    },
                                                                    minWidth:300
                                                                });
                                                            }
                                                            else{
                                                                if(res.data.finished){
                                                                    Ext.getCmp("pPrueba").setDisabled(true);
                                                                }
                                                            }
                                                        }
                                                    }
                                                    else{
                                                        Ext.MessageBox.show({
                                                            title: 'Error en la operaci\u00F3n',
                                                            msg: res.message,
                                                            buttons: Ext.MessageBox.OK,
                                                            icon: Ext.MessageBox.ERROR,
                                                            minWidth:250,
                                                            minHeight:200
                                                        });
                                                    }
                                                },
                                                failure:function(form, action) {     
                                                    if(action.failureType == 'load'){                            
                                                        Ext.Msg.alert('Error', action.result.reason);
                                                    } 
                                                    else{
                                                        Ext.Msg.alert('Alerta!', 'Servidor no encontrado: ' + action.response.responseText); 
                                                    } 
                                                }
                                            });
                                        },
                                        onNext:function(_thiswg){
                                            Ext.Ajax.request({
                                                url: BASE_URL + 'questions/next',
                                                method: 'POST',
                                                params: {
                                                    qCurrentId: _thiswg.question.id, 
                                                    elem_test_id:_thiswg.question.elem_test_id
                                                },
                                                success:function(action) {   
                                                    var res = Ext.decode(action.responseText);
                                                    if(res.success){
                                                        //pregunta siguiente
                                                        _thiswg.question = null;
                                                        _thiswg.question = res.data;
                                                        _thiswg.question.isCache = false;
                                                        _thiswg.addAnswers(_thiswg.question.answers);
                                                        _thiswg.prevQuestion = null;
                                                        _thiswg.prevQuestions = null;
                                                        //animamos widget y cuando finalice capturamos con el cabllback
                                                        _thiswg.animate("right", res, function(){
                                                            _thiswg._render();
                                                        });
                                                    }
                                                    else{
                                                        Ext.MessageBox.show({
                                                            title: 'Error en la operaci\u00F3n',
                                                            msg: res.message,
                                                            buttons: Ext.MessageBox.OK,
                                                            icon: Ext.MessageBox.ERROR,
                                                            minWidth:250,
                                                            minHeight:200
                                                        });
                                                    }
                                                },
                                                failure:function(form, action) {     
                                                    if(action.failureType == 'load'){                            
                                                        Ext.Msg.alert('Error', action.result.reason);
                                                    } 
                                                    else{
                                                        Ext.Msg.alert('Alerta!', 'Servidor no encontrado: ' + action.response.responseText); 
                                                    } 
                                                }
                                            });
                                        }
                                    });
    		            		}
                                else{
                                    jQuery("#dQuestions").html("<h2 style='padding:20px;'>Prueba finalizada</h2>");
                                    //Ext.getCmp('pPrueba').collapse();
                                }
    		            	}
    		            }
    	        	},
    	        	{
    	        		title: 'F.A.Q y Casos Clínicos Asociados',
    		            region: 'south',     
    		            xtype: 'panel',
    		            split: true,   
    		            margins: '10',
                        
    		            width: "100%",
                        autoScroll:true,
                        scroll:true,
    		            height:250,
    		            collapsible: true, 
    		            collapsed:true,
    		            layout: 'fit',
                        layout:'hbox',
                        items:[
                            {
                                xtype:'panel',
                                //title:'F.A.Q.',
                                bodyPadding:'20',
                                height:250,
                                autoScroll:true,
                                scroll:true,
                                width:'50%',
                                html:'<div id="faqs"></div><ul style="margin-top:20px;"><li>No esta tu pregunta?</li><li><button id="btnNewFaq" class="btn btn-success">Solicitalo aquí!</button></li></ul>',
                                listeners:{
                                    render:function(){
                                        var html = '<h3>This is question 1?</h3>'+
                                                    '<div>'+
                                                        '<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>'+
                                                    '</div>'+
                                                    '<h3>This is question 2?</h3>'+
                                                    '<div>'+
                                                        '<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>'+
                                                    '</div>';
                                        jQuery("#faqs").html(html);
                                        jQuery('#faqs h3').each(function() {
                                                var tis = $(this), state = false, answer = tis.next('div').slideUp();
                                                tis.click(function() {
                                                    state = !state;
                                                    answer.slideToggle(state);
                                                    tis.toggleClass('active',state);
                                                });
                                        });
                                        jQuery("#btnNewFaq").on('click',function(){
                                            newFAQ();
                                        });
                                    }
                                }
                            },
                            {

                            }
                        ]
                        
    	        	}
    	        	
            	],
    	        renderTo: 'li_top'
    	    });

    		updateObjectReferences(object)
        }
    });


</script>
<input id="hd_context" type="hidden" value="<?php echo $breadcumb; ?>"/>
<ul class='ul_page' style="margin:0px;/*background-color: #237FCB;*/">
    <li id="li_top"></li>
    <li id="li_middle"></li>
    <li id="li_bottom"></li>
</ul>

<ul>
    <li class="liQuestion"></li>
    <li class="liAnswers"></li>
    <li class="liChart"></li>
</ul>

<!-- template usado por vista extjs -->
<div id="jplayer_template" style="display: none;">
        <div class="jp-type-single" style="width:100%;">
                <div class="jp-gui jp-interface">
                        
                        <ul class="jp-controls" style="list-style: none; list-style-type: none;">
                                <li style="display: inline;width:30px;float:left;"><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                <li style="display: inline;width:30px;float:left;"><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                <li style="display: inline;width:30px;float:left;"><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                <li style="display: inline;width:30px;float:left; margin-left: 15px;"><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                <li style="display: inline;width:30px;float:left;margin-left: 15px;"><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                <!--<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>-->
                        </ul>
                        <div class="jp-title">
                            <ul>
                                    <li></li>
                            </ul>
                        </div>
                        <div class="jp-progress">
                                <div class="jp-seek-bar">
                                        <div class="jp-play-bar"></div>
                                </div>
                        </div>
                        <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-time-holder">
                                <div class="jp-current-time"></div>
                                <div class="jp-duration"></div>

                                <ul class="jp-toggles">
                                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                </ul>
                        </div>
                </div>
        </div>
</div>